<template>
    <div>
        <el-form ref="form" label-width="120px" class="form">
            <el-form-item label="视频">
                <el-input v-model="bannerUrl" placeholder="请填写视频地址"></el-input> or
                <el-upload class="upload" :headers="uploadHeader" :action="BASEURL + '/upload/single/video'" :show-file-list="false" :on-success="uploadVideoSuccess">
                    <el-button size="small" type="primary">上传视频</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item v-if="bannerUrl" label="视频地址">
                <el-button type="text"><a :href="getImageUrl(bannerUrl)" target="_blank">{{getImageUrl(bannerUrl)}}</a></el-button>
            </el-form-item>
            <el-form-item label="视频封面">
            	<el-input v-model="indexPoster" placeholder="请填写视频封面"></el-input> or
                <el-upload class="upload" :headers="uploadHeader" :action="BASEURL + '/upload/single/poster'" :show-file-list="false" :on-success="uploadPosterSuccess">
                    <el-button size="small" type="primary">上传封面</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item v-if="indexPoster" label="封面图片">
               	<img :src="getImageUrl(indexPoster)" alt="" class="poster-thumb">
            </el-form-item>
            <el-form-item label="首页文字">
                <el-input type="textarea" :rows="5" placeholder="请输入首页文字" v-model="indexText">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { getConfig, setConfig } from '@/api/api'
export default {
    data: function() {
        return {
            bannerUrl: '',
            indexText: '',
            indexPoster: '',
            uploadHeader: {
                TOKEN: sessionStorage.getItem('jwt')
            }
        }
    },
    created: function() {
        getConfig('bannerUrl,indexText,indexPoster').then(res => {
            console.log(res)
            this.bannerUrl = res.bannerUrl;
            this.indexText = res.indexText;
            this.indexPoster = res.indexPoster;
        })
    },
    methods: {
        uploadVideoSuccess: function(res) {
            if (res.status) {
                this.$message({
                    message: '上传成功',
                    type: 'success'
                })
                this.bannerUrl = res.data.webPath;
            } else {
                this.$message({
                    message: '上传失败',
                    type: 'error'
                })
            }
        },
        uploadPosterSuccess: function(res) {
            if (res.status) {
                this.$message({
                    message: '上传成功',
                    type: 'success'
                })
                this.indexPoster = res.data.webPath;
            } else {
                this.$message({
                    message: '上传失败',
                    type: 'error'
                })
            }
        },
        save: function() {
            if (this.bannerUrl == '') {
                this.$message({
                    message: '请上传首页视频',
                    type: 'error'
                })
                return;
            }
            var indexObj = {
            	bannerUrl: this.bannerUrl,
            	indexPoster: this.indexPoster,
            	indexText: this.indexText
            }
            setConfig(indexObj).then(res => {
            	this.$message({
                    message: '保存成功',
                    type: 'success'
                })
            })
        }
    }
}
</script>
<style scoped>
.form .el-input {
    width: 400px;
}

.upload {
    display: inline-block;
}

.poster-thumb {
    width: 400px;
}
</style>